<template>
	<view class="page-loading">
		<tn-overlay :show="props.loading">
			<view class="loading-container">
				<view class="loading-block">
					<tn-loading show animation size="40px"></tn-loading>
				</view>
			</view>
		</tn-overlay>
	</view>
</template>

<script setup lang="ts">
const props = defineProps({
	loading: {
		type: Boolean,
		default: () => {
			return false;
		}
	}
});
</script>

<style scoped lang="scss">
.page-loading {
	.loading-container {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.loading-block {
		width: 250rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>
